<template>
	<movable-area class="movableArea">
		<movable-view class="movableView" inertia out-of-bounds direction="all" :x="phone_W" :y="phone_H">
			<slot name="content">
				<view class="fab">
					<!-- #ifndef MP-ALIPAY -->
					<u-button
						:custom-style="{ width: bgWidth, height: bgHeight}"
						hover-class="none"
						@click="() => emits('click')"
					>
						<u-image
							:src="bg"
							:width="bgWidth"
							:height="bgHeight"
						/>
					</u-button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<view class="centerV base-color">
						<contact-button tnt-inst-id="n14_MTBR" size="60rpx" scene="SCE01275548" />
					</view>
					<!-- #endif -->
				</view>
			</slot>
		</movable-view>
	</movable-area>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
	bg: {
		type: String,
		default: '',
	},
	bgWidth: {
		type: String,
		default: '110rpx',
	},
	bgHeight: {
		type: String,
		default: '86rpx',
	}	
});	
const emits = defineEmits(['click']);

const phone_W = ref(0);
const phone_H = ref(0);
uni.getSystemInfo({
	success: (res) => {
		phone_W.value = res.windowWidth;
		phone_H.value = res.windowHeight;
	}
});
defineExpose({
	name:'fab-buttom'
})
</script>

<style lang="scss" scoped>
.movableArea {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(90% - 30rpx);
	height: calc(90% - 400rpx);
	margin: 100rpx 15rpx;
	pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
	z-index: 99;
}

.movableView {
	pointer-events: auto; //可以点击
}

.u-button--info{
	border: none !important;
	background-color: transparent;
}
</style>
